<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="./css/swipeslider.css">
    <style>
        #full_feature {
            margin: 0;
            padding: 0;
        }

        .swipslider .sw-slide {
            width: '100%';
            height: 12rem;
            margin: 0;
            padding: 0;
        }

        .swipslider .sw-slide img {
            height: 12rem;
            width: 100%;
        }

        .hot {
            line-height: 1rem;
            font-size: 0.5rem;
            height: 1rem;
            background-color: #F5F5F5;
            vertical-align: center;
        }

        .hotIcon {
            height: 0.6rem;
            width: 0.1rem;
            background-color: #FF9326;
            margin-left: 0.1rem;
            margin-right: 0.1rem;
        }

        .goodsImg {
            margin: 0.3rem;
            height: 3.5rem;
            width: 3.5rem;
        }

        .goodsItem {
            display: flex;
            flex-direction: row;
            margin-top: 0.1rem;
            background: rgba(255, 255, 255, 1);
        }

        .goodsInfo {
            display: flex;
            flex-direction: column;
            margin-left: 1rem;
        }

        .goodsName {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
            line-height: 1rem;
            text-align: start;
            margin-top: 0.5rem;
        }

        .indexPrice {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 1rem;
            width: 13rem;
            margin-top: 1rem;
        }

        .salePrice {
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            color: rgba(231, 37, 16, 1);
            line-height: 0.72rem;
        }

        .orgPrice {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            text-align: center;
            margin-right: 0.5rem;
            line-height: 1.5rem;
        }
    </style>
</head>

<body>
<!-- 你的html代码 -->
<div class="page">
    <!-- <header class="bar bar-nav">
         <a class="button button-link button-nav pull-left" data-transition='slide-out'>
             <span class="icon icon-left"></span>
             返回
         </a>
         <h1 class="title">首页</h1>
     </header>-->
    <nav class="bar bar-tab">
        <a class="tab-item active" href="./index.html">
            <span class="icon icon-home"></span>
            <span class="tab-label">首页</span>
        </a>
        <a class="tab-item" href="./category.html">
            <span class="icon icon-menu"></span>
            <span class="tab-label">分类</span>
        </a>
        <a class="tab-item" href="./cart.html">
            <span class="icon icon-cart"></span>
            <span class="tab-label">购物车</span>
        </a>
        <a class="tab-item" href="./personal.html">
            <span class="icon icon-me"></span>
            <span class="tab-label">我的</span>
        </a>
    </nav>
    <!-- 这里是页面内容区 -->
    <div class="content">
        <!-- Slider -->
        <figure id="full_feature" class="swipslider">
            <ul class="sw-slides">
                <li class="sw-slide">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt="Summer beach concept">
                </li>
                <li class="sw-slide">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt="Lang from Yie Ar Kung Fu">
                </li>
                <li class="sw-slide">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt="Tiny Tina">
                </li>
                <li class="sw-slide">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt="Tiny Tina from Borderlands 2">
                </li>
                <li class="sw-slide">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt="Redhead girl">
                </li>
            </ul>
        </figure>
        <div class="hot">
            <span class="hotIcon">&nbsp;</span>热销商品
        </div>
        <div id="goods">
            <div class="goodsItem">
                <div class="goodsImgDiv">
                    <img class="goodsImg"
                         src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                         alt=""/>
                </div>
                <div class="goodsInfo">
                    <div class="goodsName">信gdhghrdbvmcfjcj对刚回到家放过任何东西方是个黑涩会分割成息</div>
                    <div class="indexPrice">
                        <span class="salePrice">￥299.00</span>
                        <span class="orgPrice">￥168.00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script type='text/javascript' src='./js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://res.wx.qq.com/open/js/jweixin-1.2.0.js' charset='utf-8'></script>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script src="./js/swipeslider.min.js"></script>
</body>
<script>
    var url = window.location.href;
    $(function () {
        $('#full_feature').swipeslider();
        if (url.indexOf("token") <= 0) {
            window.location.href = "/wx/api/readyGetWxUserInfo?jumpUrl=" + encodeURIComponent(url);
        } else {
            if (url.indexOf("&") <= 0) {
                var token = url.split("=")[1];
                $.getJSON("/wx/api/addCookie?token=" + token, function (data) {
                    if (data.code === 0) {
                        initWx();
                    }
                })
            } else {
                var params = url.split("&");
                for (var i = 0; i < params.length; i++) {
                    var token;
                    if (params[i].indexOf("token") > 0) {
                        token = params.splice("=")[1];
                    }
                    $.getJSON("/wx/api/addCookie?token=" + token, function (data) {
                        if (data.code === 0) {
                            initWx();
                        }
                    })
                }
            }

        }
    });

    function initWx() {
        $.getJSON("/wx/api/getJsApi?url=" + encodeURIComponent(url), function (data) {
            appId = data.data.appId;
            nonceStr = data.data.nonceStr;
            signature = data.data.signature;
            timestamp = data.data.timestamp;
            wx.config({
                //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名
                jsApiList: ['getLocation', 'chooseWXPay'] // 必填，需要使用的JS接口列表
            });
        });
    }

    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                var location = latitude + "_" + longitude;
                $.getJSON(prefix + "/shopInfo/api/getShopInfo/1009372512464801792?location=" + location, function (data) {
                    if (data.code == 0) {
                        var adInfioList = data.adInfo;
                        var goodsList = data.goodsList;
                        var shopInfo = data.shopInfo;
                        var swiperHtml = "";
                        $("title").text(shopInfo.flShopName);
                        $.each(adInfioList, function (index, item) {
                            swiperHtml += '<li class="sw-slide"><img src="'+item.flPic+'"></li>';
                        });
                        $(".swipslider .sw-slides").html(swiperHtml);
                        var goodsItemList = "";
                        $.each(goodsList, function (index, item) {
                            goodsItemList += '<div class="goodsItem" onclick="jumpGoodsDetail(' + item.flId + ')">' +
                                '<div class="goodsImgDiv">' +
                                '<img class="goodsImg" src="' + item.flThumbnailPic + '"' +
                                'alt="" />' +
                                '</div>' +
                                '<div class="goodsInfo">' +
                                '<div class="goodsName">' + item.flName + '</div>' +
                                '<div class="indexPrice">' +
                                '<span class="salePrice">￥' + item.flSalePrice + '</span>' +
                                '<span class="orgPrice">￥' + item.flOriginalPrice + '</span>' +
                                '</div>' +
                                '</div>' +
                                '</div>';
                        });
                        $("#goods").html(goodsItemList);
                    }
                });
            }
        });
    });

    function jumpGoodsDetail(goodsId) {
        window.location.href = "./goodsDetail.html?goodsId=" + goodsId;
    }

</script>

</html>
